<!--  -->
<template>
  <div class="one">
    <div class="wrapper">
      <div class="content">
        <el-carousel :interval="3000" type="card" height="250px">
          <el-carousel-item>
            <div @click="click1">
              <img src="~assets/img/show/15.jpg" alt="" />
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div @click="click2">
              <img src="~assets/img/show/16.jpg" alt="" />
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div @click="click3">
              <img src="~assets/img/show/17.jpg" alt="" />
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div @click="click4">
              <img src="~assets/img/show/18.jpg" alt="" />
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div @click="click5">
              <img src="~assets/img/show/19.jpg" alt="" />
            </div>
          </el-carousel-item>
        </el-carousel>
        <div class="totitle">海报作品展</div>
        <ul class="item">
          <li class="item-img">
            <img src="~assets/img/one/04.jpg" alt="" />
            <span></span>
          </li>
          <li class="item-img">
            <img src="~assets/img/one/05.jpg" alt="" />
            <span></span>
          </li>
          <li class="item-img">
            <img src="~assets/img/one/06.jpg" alt="" />
            <span></span>
          </li>
          <li class="item-img">
            <img src="~assets/img/one/07.jpg" alt="" />
            <span></span>
          </li>
          <li class="item-img">
            <img src="~assets/img/one/08.jpg" alt="" />
            <span></span>
          </li>
          <li class="item-img">
            <img src="~assets/img/one/09.jpg" alt="" />
            <span></span>
          </li>
          <li class="item-img">
            <img src="~assets/img/one/10.jpg" alt="" />
            <span></span>
          </li>
          <li class="item-img">
            <img src="~assets/img/one/11.jpg" alt="" />
            <span></span>
          </li>
        </ul>
        <div class="totitle">征文作品展</div>

        <ul class="essay">
          <li class="item1">
            <img src="~assets/img/one/border5.png" alt="" />
            <div class="box">
              <div class="box1">
                <img src="~assets/img/one/02.jpg" alt="" />
              </div>
              <div class="box1">
                <img src="~assets/img/one/03.jpg" alt="" />
              </div>
              <div class="box1">
                <img src="~assets/img/one/03.jpg" alt="" />
              </div>
              <div class="box1">
                <img src="~assets/img/one/03.jpg" alt="" />
              </div>
            </div>
          </li>
          <li class="essay-item item2">
            <img class="border1" src="~assets/img/one/border2.png" alt="" />
            <img class="border2" src="~assets/img/one/border7.png" alt="" />
            <div class="info">
              恰风华正茂奋斗正当时 千秋伟业恰风华正茂，久久为功书时代华章。
              在决胜全面小康、决战脱贫攻坚的关键时刻，我们迎来了中国共产党的100周年纪念日。100年，对于一个人，也许很漫长;对于一个国家，弹指一挥间;对于一个政党，恰是风华正茂。站在百年目标的门槛之上，高质量打赢脱贫攻坚战，是9191.4万颗“红心”所向，是14亿中华儿女的夙愿。广大党员干部在脱贫攻坚火线战场上越战意志越坚、信心越强、干劲越足，正以不畏风浪的气魄攻坚克难，以只争朝夕的奋斗创造伟业。
              立脱贫之志，硬攻坚脊梁，穷根定能被拔除。习近平总书记强调，“扶贫先要扶志，要从思想上淡化‘贫困意识’”。志气是人的内在驱动力，激活内因，脱贫的腰杆才会硬起来，办法才会多起来，信心才会强起来。幸福是奋斗出来的，各级党组织必须充分发挥党的思想政治优势，聚焦“六稳”“六保”，在组织群众、发动群众、宣传群众等方面下足“绣花功夫”，变“输血”为“造血”、变“授之以鱼”为“授之以渔”，激活贫困群众内生动力，形成“我想脱贫”“我能脱贫”“我要脱贫”的共同奋斗战贫困的氛围，从思想深处拔出穷根、彻底撕掉贫困标签。
              挑千斤重担，乘风浪前行，火线决战践初心。空谈误国，实干兴邦。“坚决打赢脱贫攻坚战，让贫困人口和贫困地区同全国—道进入全面小康社会”，既是我们党对人民和历史的庄严承诺，也是时代赋予我们的光荣使命。全国累计选派43.5万名干部担任第一书记，派出277.8万名干部驻村帮扶。千斤重担人人挑。无论是第一书记、驻村干部，还是地方领导、村干部，都必须主动挑起“千钧担”、当好“战斗员”，面对矛盾敢于迎难而上，遇到困难勇于挺身而出，敢打敢拼、能打能拼、善打善拼，只争朝夕，不负韶华，用实干和担当投身火线战场践行初心使命，书写脱贫攻坚奇迹的精彩篇章。
            </div>
          </li>
          <li class="essay-item item3">
            <img class="border1" src="~assets/img/one/border6.png" alt="" />
            <img class="border2" src="~assets/img/one/border4.png" alt="" />
            <div class="info">
              光阴似箭，岁月如梭，转瞬之间，中国共产党已经走过100年的风风雨雨。在党的100岁生日之际，我们每一个人的心情，除了感慨，的是感激。
              在这激情万丈的日子里，我脑海里的记忆大门，正缓缓向我打开。1921年7月，浙江嘉兴南湖的一艘红船上传出巨人的呐喊，犹如春雷唤醒了沉睡已久的东方雄狮，拔开了数百年来笼罩于千万仁人志士心头的迷雾，亮出了共产主义的伟大旗帜，点燃了神洲大地上的星星革命之火。从此，炎黄子孙们的理想有了归一，有了值得托付的领导人——中国共产党。悠悠长夜下终于亮起了一颗耀眼的启明星，它照亮了黎明前的黑暗，指引着前进的方向。
              在那灾难深重，血雨腥风的漫漫长夜，是“七一”的晨曦拨开华夏大地重重迷雾，激励着华夏儿女，为了民族的自由独立，抛头颅、洒热血，将共产主义信念的火种撒向大地，把理想的火炬照亮强国之路，万里河山因此而挺拔俊秀，雄浑壮丽;历史的长河因此而波澜壮阔，豪情万丈。在战争年代里的每一天，都会为每时每刻发生在战士身上的故事感动着。董存瑞、黄继光、张思德、刘胡兰每个熟悉的名字都让我们难以忘怀，都给我们留下了感人肺腑的故事。为了中国人民的事业，为了共产主义事业，他们无怨无悔地奋勇向前。我以我们的祖国有这样的英雄而感到骄傲，我以生在这样英雄的国度而自豪。
            </div>
          </li>
          <li class="item4">
            <div class="left">
              <div class="img">
                <img src="~assets/img/one/left.jpg" alt="" />
              </div>
              <div class="info">
                小时候听这首歌，有些懵懂的感觉，长大后唱这首歌，内心燃起炽热，这首歌就是“没有共产党就没有新中国”。
                在你喜迎百年华诞的美好时节，我们重温难以忘怀的峥嵘岁月，把内心无尽的感慨深情抚摸。
                当你在石库门点燃那盏灯火，信仰之光把黑暗刺破，坚定不移的脚步踏碎多少沉珂，大地飞扬出一首首慷慨激昂的赞歌。
                当你在嘉兴南湖立志砸碎锈迹斑斑的枷锁，红船起航碧海扬波，一腔腔沸腾的热血，把镰刀铁锤镀成人间最美的颜色。
                面对血腥的白色恐怖，在生死关头艰难求索，八一南昌首役的枪声在云霄响彻，枪杆子里面出政权是最英明的抉择。
                秋收起义，朱毛会师，实事求是的井冈山道路，成为马克思主义中国化的经典之作，从此解放劳苦大众的革命事业，开启了走向成功的艰难跋涉。
              </div>
            </div>
            <div class="right">
              <div class="img">
                <img src="~assets/img/one/right.jpg" alt="" />
              </div>
              <div class="info">
                该亮剑时绝不退缩，虽然一穷二白，保家卫国好气魄，朝鲜战场打出了国威和军威，八国联军侵占北京的耻辱，一去没有覆辙。
                经石库门到天安门，28年抛头颅洒热血，承载人民的重托，十月大典，国旗升起了庄严和承诺，劳苦大众从此过上了当家做主的幸福生活。
                从鸭绿江到珍宝岛，钢铁的意志让强敌胆怯，一艘炮舰打开国门的历史，被彻底改写。
                由兴业路到复兴路，涉万险初心不改，经挫折坚持不懈。战胜三年自然灾害，你把百姓冷暖捧在心窝，励精图治朝气蓬勃，曾经贫瘠的土地开出花朵。
                潜深海下五洋捉鳖、驭神州上九天揽月，北斗卫星给了我们明亮的眼睛，两弹一星是人间最璀璨的焰火，伟大的祖国，再也不容强盗宰割。
                香港澳门回归祖国，北京奥运星光闪烁，加入世贸弯道超车，喜看改革开放累累硕果。
              </div>
            </div>
          </li>
        </ul>

        <div class="back-home" @click="backHome">
          <img src="~assets/img/backtop/backhome1.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "One",
  components: {},
  methods: {
    click1() {
      this.$router.push("/one").catch((err) => {
        err;
      });
    },
    click2() {
      this.$router.push("/two");
    },
    click3() {
      this.$router.push("/three");
    },
    click4() {
      this.$router.push("/four");
    },
    click5() {
      this.$router.push("/five");
    },
    backHome(){
      this.$router.push("/home")
    }
  },
};
</script>

<style scoped>
.one {
  width: 100vw;
  height: 100vh;
  background: pink;
  overflow: hidden;
  background: url("~assets/img/show/18.jpg");
  /* background: url("~assets/img/one/04.jpg"); */
  background-size: cover;
}
.back-home{
  width: 60px;
  height: 60px;
  position: fixed;
  top: 40px;
  left: 160px;
  /* background:#AE454A ; */
  background: #fff;
  border-radius: 50%;
  opacity: .8;
  box-shadow: 0 10px 10px rgba(0, 0, 0, .3);
  overflow: hidden;
}
.back-home img{
  margin-top: 7px;
width: 90%;
transition: .5s;
}
.back-home:hover img{
  transform: scale(1.2);
}
.el-carousel__item img {
  width: 100%;
}
.img1 {
  float: left;
  width: 268px;
}
.img1 img {
  width: 100%;
  vertical-align: middle;
}
.img2 {
  float: right;
  width: 268px;
}
.img2 img {
  width: 100%;
  vertical-align: middle;
}
.wrapper {
  width: 1000px;
  margin: 0 auto;
  background: #eee;
  height: 100%;
  overflow-y: scroll;
  /* opacity: 0.9; */
}
.wrapper::-webkit-scrollbar {
  display: none;
}
.totitle {
  margin-top: 20px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  /* text-indent: 2em; */
  color: #333;
}
.title {
  font-size: 20px;
  position: absolute;
  font-family: "Hiragino Sans GB";
  width: 100px;
  color: rgb(241, 78, 50);
  margin-left: 140px;
}
.content {
  overflow: hidden;
  width: 100%;
}
.item {
  width: 1000px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding-bottom: 20px;
}
.item .item-img {
  margin-top: 50px;
  width: 220px;
  height: 300px;
  background: #fff;
  box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.6s;
  padding: 5px;
  position: relative;
  overflow: hidden;
}
.item-img:hover img {
  /* transform: translateY(-13px); */
  transform: scale(1.2);
  transition: all 0.5s ease 0s;
}
.item-img span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border: 3px solid #fff;
  transition: all 0.5s ease 0s;
}
.item-img:hover span {
  transition: all 0.5s ease 0s;
  left: 10px;
  right: 10px;
  bottom: 10px;
  top: 10px;
}
.item .item-img img {
  width: 100%;
  height: 100%;
  transition: all 0.5s ease 0s;
}
.essay {
  position: relative;
  padding: 20px;
}
.essay .item1 {
  width: 100%;
  text-align: center;
  position: absolute;
}
.essay .item1 .box {
  /* transform: rotate(0.2deg); */
  transform: rotateZ(2deg);
  width: 800px;
  height: 220px;
  /* background: #000; */
  position: absolute;
  top: 40px;
  left: 90px;
  opacity: 0.8;
  display: flex;
  justify-content: space-between;
}
.essay .item1 .box .box1 {
  width: 190px;
  height: 220px;
  background: #bfa;
}
.essay .item1 img {
  width: 90%;
}
.essay .item1 .box .box1 img {
  width: 100%;
  height: 100%;
}
.essay .essay-item {
  position: relative;
  margin: 0 auto;
  width: 90%;
  background: #aad4ff;
  border-radius: 5px;
  text-indent: 2em;
  padding: 30px;
  box-shadow: 0 5px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  transition: all 0.8s ease 0s;
  text-align: justify;
  margin-bottom: 40px;
}
.essay .essay-item .border1 {
  position: absolute;
  width: 20%;
  z-index: 9;
  top: 0;
  left: 0;
}
.essay .item3 .border2 {
  position: absolute;
  width: 20%;
  z-index: 9;
  top: 0;
  right: 0;
}
.essay .essay-item:hover {
  transform: translate(0px, -10px);
  background: #fc2d2ddc;
  color: #333;
}
.essay .item2 {
  margin-top: 400px;
}
.essay .item2 .border2 {
  position: absolute;
  width: 20%;
  z-index: 9;
  bottom: 0;
  right: 0;
}
.essay .item4 {
  margin: 0 auto;
  width: 90%;
  height: 600px;
  background: #ddd;
  padding: 30px 30px;
  display: flex;
  justify-content: space-between;
}
.essay .item4 .left {
  width: 40%;
  height: 100%;
  background: #fe6553;
  transition: all 0.8s;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4);
}
.essay .item4 .left:hover {
  transform: scale(1.1);
}
.essay .item4 .left .img {
  width: 100%;
  margin-bottom: 20px;
  /* padding: 0 20px; */
}
.essay .item4 .left .info {
  text-align: justify;
  text-indent: 2em;
  padding: 0 8px;
}
.essay .item4 .left .img img {
  width: 100%;
}
.essay .item4 .right {
  width: 40%;
  height: 100%;
  background: #bddee5;
  transition: all 0.8s;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4);
}
.essay .item4 .right:hover {
  transform: scale(1.1);
}
.essay .item4 .right .img {
  width: 100%;
  margin-bottom: 20px;
  /* padding: 0 20px; */
}
.essay .item4 .right .info {
  text-align: justify;
  text-indent: 2em;
  padding: 0 8px;
  font-size: 15px;
}
.essay .item4 .right .img img {
  width: 100%;
}
</style>